<?php include_once 'header.php'; ?>
<style>
    .title{
        opacity: 1;
        text-align: center;
        position: absolute;
        top: 13%;
        left: 0px;
        right: 0px;
    }

    .edit-form{
        position: absolute;
        background-color: green;
        width: 95.9%;
        opacity: 0.6;
        height: 17px;
        cursor: pointer;
        margin-top:2px;
    }

    .edit-form > h6 {
        padding: 0px;
        color: white;
        margin: 2px;
        text-align: center;
    }

    .ajax-upload-dragdrop{
        width:100%;
    }
</style>
<aside class="right-side">
    <section class="content-header">
        <h1>
            Special Offers
            <small>Content Management</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-file-o"></i> Content Management</a></li>
            <li class="active">Special Offers</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box box-solid" style="padding:10px;">
                    <div class="box-header" style="text-align: right;">
                        <button class="btn btn-warning" id="enable-special-offer"><?php if($systemConfig->getValue() == "true"){echo "Disable";}else{ echo "Enable";} ?> Special Offers </button>
                        <input type="hidden" id="enable-special-value" value="<?php echo $systemConfig->getValue()?>"/>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div class="row">
                            <div class="col-sm-8">
                                <div class="edit-form" style="display:none;"><h6>Click to Edit</h6></div>
                                <div class="offer-article" id="special-offer_1">
                                    <div class="title"><h1 class="special-offer-desc"><?php echo $offers[0]->getDescription(); ?></h1></div>
                                    <img  src="<?php echo img_url() . $offers[0]->getImage(); ?>" alt="" class="img-responsive special-offer-img">
                                </div>
                                <div class="edit-form" style="margin-top:17px;display:none"><h6>Click to Edit</h6></div>
                                <div class="offer-article" style="margin-top:15px;" id="special-offer_2">
                                    <div class="title" style="top:65%;"><h1 class="special-offer-desc"><?php echo $offers[1]->getDescription(); ?></h1></div>
                                    <img src="<?php echo img_url() . $offers[1]->getImage(); ?>" alt="" class="img-responsive special-offer-img">
                                </div>
                            </div>

                            <div class="col-sm-4">
                                <div class="edit-form" style="width:91.6%;display:none"><h6>Click to Edit</h6></div>
                                <div class="offer-article" id="special-offer_3">
                                    <div class="title"><h1 class="special-offer-desc"><?php echo $offers[2]->getDescription(); ?></h1></div>
                                    <img src="<?php echo img_url() . $offers[2]->getImage(); ?>" alt="" class="img-responsive special-offer-img">
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</aside>
<div class="modal fade" id="mySpecialOffer" tabindex="-1" role="dialog" aria-labelledby="myMailLabel" aria-hidden="true"
     data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myMailLabel">Edit Special Offers.</h4>
            </div>
            <form id="special-offer-form" method="post">
                <div class="modal-body">
                    <input type="hidden" id="special-offer-id" name="special-offer-id"/>
                    <input type="hidden" id="special-image-name" name="special-image-name"/>
                    <div id="mulitplefileuploader">Upload</div>
                    <div id="status"></div>
                    <br/><br/>
                    <div class="form-group">
                        <input type="text" class="form-control" id="special-details" name="special-details" placeholder="Enter Offer Details"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-default">Save</button>
                    <button type="button" class=" pull-right btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php include 'footer.php'; ?>
<script>

    $(".offer-article").click(function(){
        var splId = getElementId($(this).attr("id"));
        $.get("getSpecialOffers/"+splId,function(response){
            if(!response.error){
                $("#special-offer-id").val(splId);
                $("#special-image-name").val(response.data.image);
                $("#special-details").val(response.data.description);
                $("#mySpecialOffer").modal("show");
            }else{
                errorAlert(response.errorMessage);
            }
        });
    });

    $("body").on("mouseover",".offer-article", function() {
        $(this).prev().show();
    });

    $("body").on("mouseout",".offer-article", function(){
        $(this).prev().hide();
    });

    $(document).ready(function () {
        var settings = {
            url: "<?php echo base_url(). "scripts/upload.php"?>",
            dragDrop: true,
            fileName: "myfile",
            allowedTypes: "jpg,png,JPG,PNG,JPEG,jpeg",
            returnType: "json",
            showStatusAfterSuccess: false,
            onSuccess: function (files, data, xhr) {
                $("#special-image-name").val(data);
            },
            onError: function (u, data, t) {
                console.log(data);
                errorAlert("Something went wrong, Please contact administrator.");
            }
        }
        var uploadObj = $("#mulitplefileuploader").uploadFile(settings);
    });

    $("#special-offer-form").submit(function(event){
        event.preventDefault();
        $.post("saveSpecialOffer",$("#special-offer-form").serialize(),function(response){
            if(!response.error){
                $("#special-offer_"+$("#special-offer-id").val()).find(".special-offer-desc").text($("#special-details").val());
                $("#special-offer_"+$("#special-offer-id").val()).find(".special-offer-img").attr("src","<?php echo img_url();?>"+$("#special-image-name").val());
                $("#special-image-name").val("");
                $("#special-offer-id").val("");
                $("#special-details").val("");
                $("#mySpecialOffer").modal("hide");
            }else{
                errorAlert(response.errorMessage);
            }
        });
    });

    $("#enable-special-offer").click(function(){
        var opt = $("#enable-special-value").val();
        if(opt == "true"){
            opt = false
        }else{
            opt = true
        }
       $.get("enableDisableSpecialOffers/"+opt,function(response){
           if(!response.error){
                if(response.data.value == "true"){
                    $("#enable-special-offer").text("Disable Special Offers");
                }else{
                    $("#enable-special-offer").text("Enable Special Offers");
                }
               $("#enable-special-value").val(response.data.value)
           }else{
               errorAlert(response.errorMessage);
           }
       });
    });
</script>